<template>
  <div :class="['c100', 'small', `p${percent}`]">
    <span class="desc percent" v-if="desc">{{ desc }}</span>
    <span class="percent">{{ percent }}</span>
    <div class="slice">
      <div class="bar"></div>
      <div class="fill"></div>
    </div>
    <span class="name">{{ name }}</span>
  </div>
</template>

<script>
export default {
  props: ['name', 'percent', 'desc']
}
</script>

<style lang="scss">
@import '@/styles/circle.scss';
</style>
